<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员状态</title>
    <script type="text/javascript" src="lib/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
    <link rel="stylesheet" href="lib/common.css">
    <script type="text/javascript" src="lib/lib.js"></script>
    <script type="text/javascript" src="lib/api.js"></script>
    <!--[if lte IE 9]>
    <script type='text/javascript' src='lib/jquery.xdomainrequest.min.js'></script>
    <![endif]-->
    <style>
        html, body {
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<form class="form-horizontal" style="margin-top: 50px;">
    <div class="control-group">
        <label class="control-label" for="inputPhone">电话号码</label>
        <div class="controls">
            <input type="text" id="inputPhone" value="" placeholder="电话号码">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputCode">验证码</label>
        <div class="controls">
            <input type="text" style="width: 70px;" id="inputCode" placeholder="验证码">
            <button type="button" class="btn" id="sendCodeBtn" style="width: 130px;" onclick="sendCode()">获取验证码</button>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button type="button" class="btn" style="width: 200px;" onclick="login()">登录</button>
        </div>
    </div>
</form>

<script type="text/javascript">
    var layer;

    layui.use(['layer'], function () {
        layer = layui.layer
        $(document).on('keydown', function(ev){
            if(ev.keyCode==27){
                var index = parent.layer.getFrameIndex(window.name)
                parent.layer.close(index)
            }
        })
    })

    function sendCode() {
        var phone = $("#inputPhone").val()
        if (phone == '') {
            layer.msg('电话号码不能为空')
            return
        }
        if (!/^1[3-9]\d{9}$/.test(phone)) {
            layer.msg('请输入正确的电话号码')
            return
        }
        var post = {
            phone: phone
        }
        api.sendCode(post, function (res) {
            if (res.code == 200) {
                layer.msg('验证码发送成功，请注意查收')
                var time = 60
                var timer = setInterval(function () {
                    $("#sendCodeBtn").text(time + '秒后重新获取').attr('disabled', 'disabled')
                    time--
                    if (time < 0) {
                        clearInterval(timer)
                        $("#sendCodeBtn").text('获取验证码').removeAttr('disabled')
                    }
                }, 1000)
            }
        })

    }

    function login() {
        // var index = parent.layer.getFrameIndex(window.name)
        // parent.layer.close(index)
        // Cookie.set('Authorization','John Doe')
        // parent.location.reload()
        var phone = $("#inputPhone").val()
        if (phone == '') {
            layer.msg('电话号码不能为空')
            return
        }
        if (!/^1[3-9]\d{9}$/.test(phone)) {
            layer.msg('请输入正确的电话号码')
            return
        }
        var code = $("#inputCode").val()
        if (code == '') {
            layer.msg('验证码不能为空')
            return
        }

        var post = {
            username: phone,
            code: code
        }
        api.login(post, function (res) {
            if (res.code == 200) {
                layer.msg('登录成功！')
                var data = res.data
                Cookie.set('account', data.account)
                Cookie.set('userId', data.user_id)
                Cookie.set('userName', data.user_name)
                Cookie.set('tenantId', data.tenant_id)
                Cookie.set('bladeAuth', data.access_token)
                Cookie.set('level', data.level)
                parent.location.reload()
            } else {
                layer.msg(res.msg)
            }
        })
    }
</script>
</body>

</html>
